<template>
	<view class="container">
		<!-- 搜索框 -->
		    <view class="search-bar">
		      <input class="search-input" placeholder="请输入搜索关键词" />
		    </view>
		<!-- 分类 -->
			<view class="categories">
			  <text class="category active">全部</text>
			  <text class="category">景区</text>
			  <text class="category">电音节</text>
			  <text class="category">马戏</text>
			  <text class="category">音乐会</text>
			  <text class="category">儿童剧</text>
			  <text class="category">演唱会</text>
			</view>
		<!-- 演唱会内容 -->
			
		<view class="events">
			<view class="event" v-for="(item, index) in 10" :key="index">
				<image src="/static/logo.png" class="event-image"></image>
				<view class="event-info">
				<text class="event-title">赛里木湖</text>	
				<view class="event-tags">
					<text v-for="(item, index) in 4" :key="index" class="tag">可选做</text>
				</view>
				<view class="event-footer">
					<text class="event-price">¥40起</text>&nbsp;
					<text class="event-date">2023年3月28日</text>&nbsp;
					<text class="event-location">新疆维吾尔自治区乌鲁木齐市人民剧场</text>&nbsp;
					<button class="buy-button">购票</button>
				</view>
				</view>
			</view>
			</view>
	</view>
</template>

<script>

</script>

<style>
.container {
  padding: 20rpx;
}
.search-bar {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.search-input {
  width: 100%;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: #f0f0f0;
  padding-left: 20rpx;
}

.categories {
  display: flex;
  justify-content: space-around;
}

.category {
  font-size: 30rpx;
  padding: 10rpx;
}

.active {
  color: red;
  border-bottom: 2rpx solid red;
}
.events {
  margin-top: 20rpx;
}

.event {
  display: flex;
  margin-bottom: 30rpx;
}

.event-image {
  width: 200rpx;
  height: 280rpx;
  margin-right: 20rpx;
}

.event-info {
  flex: 1;
}

.event-title {
  font-size: 32rpx;
  font-weight: bold;
}

.event-location {
  font-size: 26rpx;
  color: #666;
  margin: 10rpx 0;
  overflow: hidden;
}

.event-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background-color: #f0f0f0;
  border-radius: 10rpx;
  padding: 5rpx 10rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  font-size: 24rpx;
}

.event-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  flex-wrap: nowrap;
}

.event-price {
  font-size: 32rpx;
  color: red;
   white-space: pre-line;
}

.event-date {
  font-size: 26rpx;
  color: #666;
  white-space: pre-line;
}

.buy-button {
  background-color: red;
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
}
</style>
